<template>
    <div class="parameters">
    <h2 class="title">Parameters</h2>
    <div>
        <div class="ivu-table-wrapper">
            <div class="ivu-table ivu-table-border">
                <div class="ivu-table-header">
                    <table cellspacing="0" sellpadding="0" border="0" width="100%">
                        <thead>
                            <tr>
                                <th>
                                    <div class="ivu-table-cell">Parameter</div>
                                </th>
                                <th width="35%">
                                    <div class="ivu-table-cell">Value</div>
                                </th>
                                <th>
                                    <div class="ivu-table-cell">Description</div>
                                </th>
                                <th width="10%">
                                    <div class="ivu-table-cell"></div>
                                </th>
                                <th width="12%">
                                    <div class="ivu-table-cell">Data Type</div>
                                </th>
                            </tr>
                        </thead>
                    </table>
                </div>
                <div class="ivu-table-body">
                    <i-form v-ref:request-data :model="requestData" :rules="validateForm(disDocData.parameters)">
                        <table cellspacing="0" sellpadding="0" border="0" width="100%">
                            <tbody>
                                <tr v-for="param in disDocData.parameters">
                                    <td>
                                        <div class="ivu-table-cell">{{ param.name }} <span v-if="param.required" style="color:brown">*</span></div>
                                    </td>
                                    <td width="35%">

                                        <div class="ivu-table-cell">
                                            <Form-item :prop="param.in + ':' + param.name">
                                                <i-select v-if="param.type == 'boolean'" :model.sync="requestData[param.in][param.name]">
                                                    <i-option></i-option>
                                                    <i-option v-for="bool in oBoolean" :value.sync="bool">{{ bool }}</i-option>
                                                </i-select>
                                                <i-select v-if="param.enum" :model.sync="requestData[param.in][param.name]">
                                                    <i-option></i-option>
                                                    <i-option v-for="option in param.enum" :value.sync="option">{{ option }}</i-option>
                                                </i-select>
                                                <i-input :value.sync="requestData[param.in][param.name]" :number="param.type==='integer'" width="100%" v-if="param.type !== 'boolean' && !param.enum" type="text" :name="param.name">
                                    
                                            </Form-item>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="ivu-table-cell">{{ param. description}}</div>
                                    </td>
                                    <td width="10%">
                                        <div class="ivu-table-cell">{{ param.in }}</div>
                                    </td>
                                    <td width="12%">
                                        <div class="ivu-table-cell">{{ param.type }}</div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </i-form>
                </div>
            </div>
        </div>
    </div>
</div>
</template>
<script>
    export default {
        props: ['requestData', 'disDocData'],
        data() {
            return {
                ruleValidate: {},
                oBoolean: {
                    'true': 'true',
                    'false': 'false'
                }
            }
        },
        methods: {
            validateForm(parameters) {
                let _self = this;
                (parameters instanceof Array) && parameters.forEach(function(param) {
                    _self.ruleValidate[param.in + ':' + param.name] = [];
                    if (param.required) {
                        _self.ruleValidate[param.in + ':' + param.name].push({
                            required: true,
                            message: '该项必填',
                            trigger: 'blur'
                        })
                    }
                    _self.ruleValidate[param.in + ':' + param.name].push({
                        type: param.type === 'boolean' ? 'enum' : param.type,
                        enum: ['true', 'false'],
                        message: '类型必须为 ' + param.type,
                        trigger: 'change'
                    })
                })
                return this.ruleValidate;
            }
        }
    }
</script>
<style scoped>
    .ivu-table-cell {
        word-break: break-word;
        overflow: visible;
    }
    
    .ivu-form-item {
        margin-bottom: 0;
    }
</style>